<template>
	<view class="container">
		<!-- <view class="topBar" :style="{'height':h+44+'px','line-height':2*h+44+'px'}">
	    <view class="back"/>
	    <view class="songName"></view>
	    <view class="back"/>
	  </view> -->
		<image lazy-load class="back-img" style="opacity: 0.9"
			src="https://thirdwx.qlogo.cn/mmopen/vi_32/iafF5yEpBEHHWlayNBaKooicVYE7qZGXvcpB5JIicLyAEexoFrZSmGjWq68qVicIPJkt08r9DzsMY3mo7M4xFrsUdw/132"
			mode="widthFix" />
		<scroll-view class="scroll-content" scroll-y>
			<!-- <scroll-view class="scroll-content" scroll-y :style="scrollStyle"> -->
			<view class="main">
				<view class="content">
					<view class="user">
						<image lazy-load
							src="https://thirdwx.qlogo.cn/mmopen/vi_32/iafF5yEpBEHHWlayNBaKooicVYE7qZGXvcpB5JIicLyAEexoFrZSmGjWq68qVicIPJkt08r9DzsMY3mo7M4xFrsUdw/132"
							class="user-img" mode="widthFix" />
					</view>
					<view>
						<view class="user-name">一枚白糖^</view>
						<view class="user-follow">
							<text style="color: #5c5c5c;">关注：107</text>
							<text style="color: #5c5c5c;">粉丝：5</text>
							<text style="color: #5c5c5c;">LV.17</text>
							<text style="color: #5c5c5c;">地区：广东惠州</text>
							<text style="color: #5c5c5c;">性别：男</text>
						</view>
						<view class="user-introduce">"阆苑储英，人竟向学"</view>
					</view>
				</view>

				<view class="content content-music">
					<view class="title">播放记录</view>
					<view class="scroll-record">
						<!-- <block v-for="item in recentPlayList" :key="item.song.id">
							<view :id="item.song.id" class="scroll-item" @tap="chooseSong">
								<image lazy-load class="scroll-img" :src="item.song.al.picUrl" />
								<view class="desc">{{item.song.name}}</view>
							</view>
						</block> -->
						<scroll-view scroll-y class="scroll-playList">
							<block v-for="(item,index) in playList" :key="index">
								<view class="box">
									<image :src="item.picUrl" mode="widthFix" class="pic"></image>
									<view class="warp">
										<view class="item">{{item.song}}</view>
										<view class="item">{{item.album}}</view>
										<view class="item">{{item.singer}}</view>
									</view>
								</view>
							</block>
						</scroll-view>
					</view>
				</view>

				<view :id="likes.id" class="content content-love" @tap="chooselist">
					<image lazy-load class="love-img" src="https://p1.music.126.net/UDpjFEHmXInxGd_xMAI12w==/109951162811986419.jpg" mode="widthFix"></image>
					<view class="love-title">
						<view>我喜欢的音乐</view>
						<!-- <view class="love-count">{{likes.trackCount}}首</view> -->
						<view class="love-count">7首</view>
					</view>
					<view class="active" :class="isActive?'yes':'no'" @tap.stop="activePlay">心动模式</view>
				</view>

				<view class="content content-own">
					<view class="shoucang-title">收藏歌单(5个)</view>
					<block v-for="item in own" :key="item.id">
						<view :id="item.id" class="own-item" @tap="chooselist">
							<image lazy-load class="love-img2" :src="item.coverImgUrl" mode="widthFix"></image>
							<view class="love-title">
								<view class="love-name">{{item.name}}</view>
								<view class="love-count">{{item.count}}</view>
							</view>
						</view>
					</block>
				</view>

				<view class="loginOut" @tap="toLogin">退出登陆</view>
			</view>
		</scroll-view>
		<common-audio v-if="showAudio" class="audio" />
	</view>
</template>

<script>
	const app = getApp()
	import {
		getRecentPlayList,
		getLevel
	} from '../../service/home'
	import {
		getSongDetail,
		userPlayList,
		activeList,
		getSonglist
	} from '../../service/songs'
	import commonAudio from 'components/common-audio'
	export default {
		components: {
			commonAudio
		},
		data() {
			return {
				h: '',
				showAudio: false,
				scrollStyle: '',
				userInfo: {}, // 用户信息
				recentPlayList: [], // 用户播放记录
				level: {},
				likes: {},
				isActive: false,
				own: [{
					coverImgUrl:'https://p1.music.126.net/5noG3sFSgZk5vHl9yV_5Mw==/109951165796624203.jpg',
					name:'小众系｜宝岛台湾的温柔海风',
					count:'3首'
				},{
					coverImgUrl:'https://p1.music.126.net/khPdkd2uXvB8xbiiYByJVw==/109951165837887565.jpg',
					name:'礼义之邦｜华夏文明五千年，薪火相传永不灭',
					count:'5首'
				},{
					coverImgUrl:'https://p1.music.126.net/Vxsf58sMyNjqnWVZa9Wbfw==/18991864347187831.jpg',
					name:'梦幻噪音治愈手册｜自赏派编织的斑斓绮梦',
					count:'2首'
				},{
					coverImgUrl:'https://p1.music.126.net/84A7C8abhHyI0wJGN79w0w==/109951164195838881.jpg',
					name:'欧美民谣 I 往昔璀璨如钻 却又锈迹斑斑',
					count:'6首'
				},{
					coverImgUrl:'https://p1.music.126.net/RtN6VzXNzOPAOhCiQSfjkQ==/109951163754607895.jpg',
					name:'Future Beats ◐ 糟糕，是心肌梗塞的感觉！',
					count:'7首'
				}],
				playList: [{
					picUrl: 'https://p2.music.126.net/JOJvZc_7SqQjKf8TktQ_bw==/29686813951246.jpg',
					song: '光辉岁月',
					album: '专辑 - 光辉岁月十五年',
					singer: '歌手 ： Beyond'
				}, {
					picUrl: 'https://p2.music.126.net/8y8KJC1eCSO_vUKf2MyZwA==/109951165796899183.jpg',
					song: '海阔天空',
					album: '专辑 - 海阔天空',
					singer: '歌手 ： Beyond'
				}, {
					picUrl: 'https://p2.music.126.net/zZtUDuWk6qIe3ezMt4UMjg==/109951165796417308.jpg',
					song: '真的爱你',
					album: '专辑 - Beyond 25th Anniversary',
					singer: '歌手 ： Beyond'
				}, {
					picUrl: 'https://p2.music.126.net/HDdQFXVIlRvR96s0mQyu9g==/109951164170257125.jpg',
					song: '挪威的森林',
					album: '专辑 - 爱情的尽头',
					singer: '歌手 ： 伍佰 & China Blue'
				}, {
					picUrl: 'https://p2.music.126.net/zDdl2mtUVUpQwBo4Cl7-1w==/109951164811431723.jpg',
					song: '突然的自我',
					album: '专辑 - 忘情1015精选辑',
					singer: '歌手 ： 伍佰 & China Blue'
				}, {
					picUrl: 'https://p2.music.126.net/L570AKxOSH6U4vEIMoHGXQ==/45079976751506.jpg',
					song: '梦醒时分',
					album: '专辑 - 单程车票',
					singer: '歌手 ： 伍佰 & China Blue'
				}, {
					picUrl: 'https://p2.music.126.net/IYmWoRF9sLry9dkzYeFXPQ==/54975581405042.jpg',
					song: '无地自容',
					album: '专辑 - 黑豹1',
					singer: '歌手 ： 黑豹乐队'
				}, {
					picUrl: 'https://p2.music.126.net/IYmWoRF9sLry9dkzYeFXPQ==/54975581405042.jpg',
					song: 'Dont Break My Heart',
					album: '专辑 - 黑豹1',
					singer: '歌手 ： 黑豹乐队'
				}, {
					picUrl: 'https://p2.music.126.net/e_2VbSuHFxTpk1Wl1oa6-w==/109951163753604263.jpg',
					song: '月亮与灵魂',
					album: '专辑 - 一部分',
					singer: '歌手 ： 张楚'
				}, {
					picUrl: 'https://p1.music.126.net/C6txAWMGlVmAcAD37RVutQ==/122045790684028.jpg',
					song: '蓝莲花',
					album: '专辑 - 时光.漫步',
					singer: '歌手 ： 许巍'
				}],
			}
		},
		onLoad() {
			// let userInfo = wx.getStorageSync('userInfo')
			// if(userInfo) {
			// 	this.userInfo = JSON.parse(userInfo)
			// 	this._getRecentPlayList(1)
			// 	this._getLevel()
			// 	this._userPlayList(this.userInfo.userId)
			// }
			console.log('profile')
			uni.$on('login', function(data) {
				console.log(data)
				this.userInfo = data.userInfo
			})
			this.h = uni.getSystemInfoSync().statusBarHeight
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('login');
		},
		methods: {
			_userPlayList(id) {
				userPlayList(id).then(res => {
					const own = res.playlist
					this.likes = res.playlist[0]
					this.own = own.slice(1)
				})
			},
			_getLevel() {
				getLevel().then(res => {
					this.level = res.data
				})
			},
			_getRecentPlayList(type) {
				let params = {
					uid: this.userInfo.userId,
					type: type
				}
				getRecentPlayList(params).then(res => {
					this.recentPlayList = res.weekData
				})
			},
			chooseSong(e) {
				let id = e.currentTarget.id
				app.addSong(id)
				getSongDetail(id).then(res => {
					app.playList(res.songs)
				})
				uni.navigateTo({
					url: '/pages/song-play/song-play?id=' + id,
				})
			},
			toLogin() {
				uni.reLaunch({
					url: '/pages/login/login',
				})
			},
			chooselist(e) {
				let id = e.currentTarget.id
				uni.navigateTo({
					url: '/pages/song-list/song-list?id=' + id,
				})
			},
			activePlay() {
				this.isActive = this.isActive==false?true:false
				// let pid = this.likes.id
				// getSonglist(pid).then(res => {
				// 	let index = Math.floor(Math.random() * 172)
				// 	let id = res.playlist.tracks[index].id
				// 	activeList(pid, id).then(res => {
				// 		app.globalData.index = -1
				// 		app.addSong(id)
				// 		app.playList(res.data)
				// 		uni.navigateTo({
				// 			url: '/pages/song-play/song-play?active=1&pid=' + pid,
				// 		})
				// 	})
				// })
			},
		},
		onShow() {
			let h = this.h
			if (app.globalData.id && app.globalData.playList.length > 0) {
				this.scrollStyle = `height: calc(100% - ${h+44+60}px);top:${h+44}px;`
				this.showAudio = true
			} else {
				this.scrollStyle = `height: calc(100% - ${h+44}px);top:${h+44}px;`
			}
		}
	}
</script>

<style>
	.yes{
		color: #61c78b;
	}
	.box{
		display: flex;
	}
	.scroll-playList{
		display: flex;
		width: 100%;
		height: 155rpx;
	}
	.pic{
		width: 150rpx;
		margin-left: 20rpx;
	}
	.warp{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.item{
		font-size: 33rpx;
		color: #696060;
	}
	.container {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #e5e5e5;
	}

	.back-img {
		width: 100%;
	}

	.scroll-content {
		position: absolute;
		top: 35px;
		width: 100%;
		height: 87%;
		z-index: 9;
		box-sizing: border-box;
	}

	.main {
		position: relative;
		width: 100%;
		min-height: calc(100% - 360rpx);
		top: 360rpx;
		box-sizing: border-box;
		background-color: #e5e5e5;
		padding: 0 4%;
	}

	.content {
		position: absolute;
		top: -40rpx;
		width: 92%;
		height: 260rpx;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		padding: 80rpx 40rpx 20rpx;
		text-align: center;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.user {
		position: absolute;
		top: -70rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 6rpx;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	.user-img {
		width: 100%;
		border-radius: 50%;
	}

	.user-name {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}

	.user-follow {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 25rpx;
		font-size: 23rpx;
		color: #333;
	}

	.user-introduce {
		font-size: 30rpx;
		color: #5c5c5c;
		margin-top: 10rpx;
	}

	/*  */
	.content-music {
		position: relative;
		top: 250rpx;
		width: 100%;
		/* height: auto; */
		box-shadow: none;
		padding: 20rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		text-align: left;
		padding-left: 15rpx;
	}

	.scroll-record {
		width: 100%;
		height: 260rpx;
		display: flex;
		margin-top: 20rpx;
		overflow: auto;
	}

	.scroll-item {
		width: 180rpx;
		margin-right: 20rpx;
	}

	.scroll-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.desc {
		font-size: 24rpx;
		text-align: left;
		color: #5c5c5c;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.music-box {
		display: flex;
		justify-content: space-between;
	}

	.content-love {
		padding: 20rpx;
		display: flex;
		position: relative;
		top: 250rpx;
		width: 100%;
		margin-top: 30rpx;
		height: 180rpx;
		text-align: left;
	}

	.love-img {
		width: 140rpx;
		border-radius: 20rpx;
	}
	.love-img2 {
		width: 150rpx;
		border-radius: 20rpx;
	}
	.love-title {
		flex: 1;
		max-width: 75%;
		padding-left: 40rpx;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 2;
		color: #333;
	}

	.love-count {
		    font-size: 30rpx;
		    color: #5c5c5c;
		    font-weight: normal;
		    margin-top: 20rpx;
	}

	.content-own {
		padding: 20rpx;
		position: relative;
		top: 250rpx;
		width: 100%;
		margin-top: 30rpx;
		height: auto;
		text-align: left;
	}

	.shoucang-title {
		font-size: 28rpx;
		color: #5c5c5c;
	}

	.own-item {
		display: flex;
		margin-top: 20rpx;
	}

	.love-count,
	.love-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.active {
		margin-top: 40rpx;
		height: 54rpx;
		padding: 7rpx 35rpx;
		font-size: 28rpx;
		border-radius: 27rpx;
		border: 1rpx solid #e1e1e1;
		font-weight: bold;
	}

	.loginOut {
		position: relative;
		margin-top: 60rpx;
		top: 230rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 50%;
		text-align: center;
		line-height: 80rpx;
		font-size: 36rpx;
		color: #fa1919;
		border-radius: 30rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	/*  */
</style>